<template>
  <div class="qua">
    <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        title="选择资质"
    />
    <van-row v-for="(item,index) in quas" :key="item.id">
      <van-col span="4">
        <div class="checkbox-div-box">
          <div class="checkbox-div">
            <van-checkbox v-model="item.selected" shape="square" :key="item.id"
                          @click="selectQua(item,index)"></van-checkbox>
          </div>
        </div>
      </van-col>
      <van-col span="16">
        <img v-lazy="item.url" class="item-img" @click="previewImg(item,index)"/>
      </van-col>
      <van-col span="4">
        <div class="number-div" v-if="item.sort > 0">
          <span>{{ item.sort }}</span>
        </div>
      </van-col>
    </van-row>
    <div class="bottom-btn">
      <van-button type="primary" color="#1e98dc" block round @click="saveSort">保存</van-button>
    </div>
  </div>
</template>

<script>
import {machineQuaGet,machineQuaSave} from "@/api/operator";
import {ImagePreview} from "vant";

export default {
  data() {
    return {
      machineId: this.$route.query.id,
      quas: [],
      previewConfig: {
        images: [],
        startPosition: 0,
        closeable: true,
      },
      maxSort: 0
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    getList() {
      let params = {
        id: this.machineId
      }
      machineQuaGet(params).then(res => {
        if (res.data && res.data.quas) {
          res.data.quas.forEach((item, index, arr) => {
            this.previewConfig.images.push(item.url)
            if (res.data.machineQuas) {
              res.data.machineQuas.forEach((m, i, a) => {
                if (item.id === m.quaId && m.sort > 0) {
                  item.sort = m.sort
                  item.selected = true
                  if(item.sort > this.maxSort){
                    this.maxSort = item.sort
                  }
                }
              })
            }
            this.quas.push(item)
          })
        }
      })
    },
    selectQua(obj, index) {
      let objSort = obj.sort
      if (obj.selected) {
        this.maxSort += 1
        obj.sort = this.maxSort
      } else {
        this.maxSort -= 1
        this.quas.forEach((item, index, arr) => {
          if (item.sort > objSort) {
            item.sort -= 1
          } else if (item.sort === objSort) {
            item.sort = 0
          }
        })
      }
      this.quas = JSON.parse(JSON.stringify(this.quas))
    },
    previewImg(obj, index) {
      this.previewConfig.startPosition = index
      return ImagePreview(this.previewConfig);
    },
    saveSort() {
      let quaWithSort = this.quas.filter(function (item, index, arr) {
        return item.sort > 0
      })
      let newQua = []
      quaWithSort.forEach((item,index,arr)=>{
        let qua={
          quaId: item.id,
          machineId: this.machineId,
          sort: item.sort
        }
        newQua.push(qua)
      })
      machineQuaSave(newQua).then(res=>{
        this.$toast.success('保存成功')
        this.onClickLeft()
      })
    }
  },
  mounted() {
    this.getList()
  }
};
</script>

<style lang="less" scoped>
.qua {
  text-align: center;
  padding-bottom: 100px;

  .number-div {
    margin-left: 5px;
    margin-top: 5px;
    width: 40%;
    //border-radius: 50%;
    //border: 1px solid blue;
    font-size: 14px;
    color: blue;
  }

  .item-img {
    width: 100%;
    height: 200px;
  }

  .selected {
    border: 1px solid blue;
  }

  .bottom-btn {
    width: 100%;
    position: fixed;
    bottom: 5px;
    left: 0;
    z-index: 10;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 10px 0;
  }

  .checkbox-div-box {
    height: 200px;

    .checkbox-div {
      margin-left: 50%;
      margin-top: 100px;
    }
  }
}

</style>
